<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 修改页面标题 -->
    <title>工作提醒-今日日常工作进展统计</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
  </head>
  <body>
    <div id="app" class="page-container" v-cloak>
      <div class="page-content">
        <el-row :gutter="10">
          <!-- 页面标题 -->
          <el-col :span="24">
            <div class="panel-title">工作提醒-今日日常工作进展统计</div>
          </el-col>
        </el-row>
        <!-- 角色 -->
        <script>
          window.role = "servicer";
          // var role = "seller";
        </script>
        <div class="panel-container">
          <!-- 客服统计表格 -->
          <el-row :gutter="10" v-if="role==='servicer'">
            <el-col :span="24">
              <el-table
                stripe
                :data="list"
                size="mini"
                :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
                ref="table"
                style="width: 100%"
                v-loading="loading"
              >
                <el-table-column
                  align="center"
                  header-align="center"
                  label="部门"
                  prop="department"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="姓名"
                  prop="name"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="今日必须完成工作"
                  prop="must"
                >
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="需回访数量"
                    prop="must_follow_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="已完成数量"
                    prop="must_finished_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="未完成数量"
                    prop="must_unfinished_num"
                  >
                    <template slot-scope="scope">
                      <span class="red">
                        {{ scope.row.must_unfinished_num}}
                      </span>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="今日可完成工作"
                  prop="can"
                >
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="需回访数量"
                    prop="can_follow_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="已完成数量"
                    prop="can_finished_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="未完成数量"
                    prop="can_unfinished_num"
                  >
                    <template slot-scope="scope">
                      <span class="red">
                        {{ scope.row.can_unfinished_num}}
                      </span>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="合计"
                  prop="total"
                >
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="需回访数量"
                    prop="total_follow_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="已完成数量"
                    prop="total_finished_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="未完成数量"
                    prop="total_unfinished_num"
                  >
                    <template slot-scope="scope">
                      <span class="red">
                        {{ scope.row.total_unfinished_num}}
                      </span>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
              <el-pagination
                small
                background
                :current-page="pageNumber"
                :page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                @current-change="currentChangeHandle"
                @size-change="sizeChangeHandle"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px; text-align: right"
              ></el-pagination>
            </el-col>
          </el-row>
          <!-- 商务统计表格 -->
          <el-row :gutter="10" v-if="role === 'seller'">
            <el-col :span="24">
              <el-table
                stripe
                :data="list"
                size="mini"
                :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
                ref="table"
                style="width: 100%"
                v-loading="loading"
              >
                <el-table-column
                  align="center"
                  header-align="center"
                  label="部门"
                  prop="department"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="姓名"
                  prop="name"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="本月业绩"
                  prop="performance"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="保级差距"
                  prop="retention_gap"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="升级差距"
                  prop="upgrade_gap"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="跟踪池总数"
                  prop="tracking_num"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="C类及以上客户数"
                  prop="above_c_num"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="今日新增C类及以上客户数"
                  prop="above_c_new"
                ></el-table-column>
              </el-table>
              <el-pagination
                small
                background
                :current-page="pageNumber"
                :page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                @current-change="currentChangeHandle"
                @size-change="sizeChangeHandle"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px; text-align: right"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
